@page
@{ Layout = "_LayoutHome"; }
@section Styles{
    <style>
        html {
            overflow-x: hidden !important;
        }

        body {
            padding: 0;
            margin: 0;
        }
    </style>
}
<main>
    <section class="py-8 bg-cover opacity-75" :style="{'background-image':'url('+studyPlan.plan.coverImg+')'}">
        <div class="py-3 text-center">
            <button type="button" class="btn py-3 px-5 rounded-pill btn-dark" v-on:click="utils.closeLayerSelf">
                <i class="bi bi-arrow-left me-3"></i>返 回
            </button>
        </div>
    </section>
    <section class="bg-white shadow-sm">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-xl-12 col-lg-12 col-md-12 col-12 position-relative">
                    <div class="position-absolute top-50 end-0 translate-middle-y pe-3">
                        <img width="158" src="/sitefiles/assets/images/status/weikaishi.png" v-if="studyPlan.state==='Weikaishi'" />
                        <img width="158" src="/sitefiles/assets/images/status/xuexizhong.png" v-if="studyPlan.state==='Xuexizhong'" />
                        <img width="158" src="/sitefiles/assets/images/status/yidabiao.png" v-if="studyPlan.state==='Yidabiao'" />
                        <img width="158" src="/sitefiles/assets/images/status/weidabiao.png" v-if="studyPlan.state==='Weidabiao'" />
                        <img width="158" src="/sitefiles/assets/images/status/yiwancheng.png" v-if="studyPlan.state==='Yiwancheng'" />
                    </div>
                    <div class="d-md-flex align-items-center justify-content-between bg-white pt-3 pb-3 pb-lg-5">
                        <div class="d-md-flex align-items-center text-lg-start text-center">
                            <div class="me-3 mt-n8">
                                <img :src="studyPlan.plan.coverImg" width="300" class="rounded border p-1 bg-white">
                            </div>
                            <div class="mt-3 mt-md-0">
                                <h1 class="mb-0 fw-bold me-3">{{ studyPlan.plan.planName }}</h1>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="d-flex align-items-center text-lg-start">
                            <blockquote class="card blockquote-left border-warning pt-3 pe-4 card-lift">
                                <p class="mb-4 font-italic ms-4">
                                    <span class="fw-bold text-success">{{ studyPlan.totalCredit }}</span>/<span class="fw-light fs-5">{{ studyPlan.plan.planCredit }}</span>
                                </p>
                                <footer class="blockquote-footer ms-4">计划学分</footer>
                            </blockquote>
                            <blockquote class="card blockquote-left ms-4 pt-3 pe-4 card-lift">
                                <p class="mb-4 font-italic ms-4">
                                    {{ studyPlan.plan.planYear }}
                                </p>
                                <footer class="blockquote-footer ms-4">计划年度</footer>
                            </blockquote>
                            <blockquote class="card blockquote-left ms-4 pt-3 pe-4 card-lift">
                                <p class="mb-4 font-italic ms-4">
                                    {{ studyPlan.plan.planBeginDateTimeStr }} -  {{ studyPlan.plan.planEndDateTimeStr }}
                                </p>
                                <footer class="blockquote-footer ms-4">计划周期</footer>
                            </blockquote>
                        </div>
                        <div class="d-md-flex align-items-center text-lg-start">
                            <blockquote class="card blockquote-left card-lift pt-3 pe-4 border-warning">
                                <p class="mb-4 font-italic ms-4">
                                    <span class="fw-bold text-success">{{ studyPlan.overCourseTotal }}</span>/<span class="fw-light fs-5">{{ studyPlan.plan.totalCount }}</span>
                                </p>
                                <footer class="blockquote-footer ms-4" v-if="studyPlan.overCourseTotal>=studyPlan.plan.courseTotal">必修课<span class="ms-2 text-success">已完成</span></footer>
                                <footer class="blockquote-footer ms-4" v-else>必修课<span class="ms-2 text-warning">请完成所有必修课的学习</span></footer>
                            </blockquote>
                            <blockquote class="card blockquote-left border-warning card-lift pt-3 pe-4 ms-4">
                                <p class="mb-4 font-italic ms-4">
                                    <span class="fw-bold text-success">{{ studyPlan.overSelectCourseTotal }}</span>/<span class="fw-light fs-5">{{ studyPlan.plan.selectTotalCount }}</span>
                                </p>
                                <footer class="blockquote-footer ms-4">
                                    选修课
                                    <span :class="studyPlan.overSelectCourseTotal>=studyPlan.plan.selectCourseOverCount ? 'text-success' : ' text-danger'" class="ms-2" v-if="studyPlan.plan.selectCourseOverByCount">完成条件：任意完成 {{ studyPlan.overSelectCourseTotal }}/{{ studyPlan.plan.selectCourseOverCount }} 门课程</span>
                                    <span :class="(studyPlan.plan.selectCourseOverByDuration/60)>=studyPlan.plan.selectCourseOverMinute ? 'text-success' : ' text-danger'" class="ms-2 text-warning" v-if="studyPlan.plan.selectCourseOverByDuration">累计学时要求: {{ utils.formatDuration(studyPlan.overSelectCourseDurationTotal) }}/{{ studyPlan.plan.selectCourseOverMinute }}分钟</span>
                                </footer>
                            </blockquote>
                            <blockquote class="card blockquote-left border-warning card-lift pt-3 pe-4 ms-4" v-if="studyPlan.plan.examId>0">
                                <p class="mb-4 font-italic ms-4">
                                    <span v-if="studyPlan.state==='Yidabiao' || studyPlan.state==='Yiwancheng'">
                                        <span class="fw-bold text-success">{{ studyPlan.plan.examName }}（{{studyPlan.maxScore}}）</span>
                                    </span>
                                    <span v-else>
                                        <span v-if="studyPlan.courseOver">
                                            <span class="fw-bold text-warning" style="cursor:pointer;" v-on:click="btnViewExamClick">{{ studyPlan.plan.examName }}（去考试）</span>
                                        </span>
                                        <span v-else>
                                            <span class="fw-bold text-danger" style="cursor:pointer;" v-on:click="utils.error('请先完成学习',{layer:true})">{{ studyPlan.plan.examName }}（去考试）</span>
                                        </span>
                                    </span>
                                </p>
                                <footer class="blockquote-footer ms-4">
                                    计划考试
                                </footer>
                            </blockquote>
                        </div>
                    </div>
                    <ul class="nav nav-lt-tab" id="pills-tab" role="tablist">
                        <li class="nav-item ms-0" role="presentation">
                            <a class="nav-link active" id="pills-course-tab" data-bs-toggle="pill" href="#pills-course" role="tab" aria-controls="pills-course" aria-selected="true">
                                必修课<span v-if="studyPlan.overCourseTotal>=studyPlan.plan.courseTotal" class="ps-2 text-success">（已完成）</span>
                            </a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a class="nav-link" id="pills-about-tab" data-bs-toggle="pill" href="#pills-about" role="tab" aria-controls="pills-about" aria-selected="false" tabindex="-1">
                                选修课
                                <span>
                                    <span v-if="studyPlan.plan.selectCourseOverByCount && studyPlan.plan.selectCourseOverByDuration">
                                        <span v-if="studyPlan.overSelectCourseTotal>=studyPlan.plan.selectCourseOverCount && (studyPlan.plan.selectCourseOverByDuration/60)>=studyPlan.plan.selectCourseOverMinute">
                                            <span class="ps-2 text-success">（已完成）</span>
                                        </span>
                                    </span>
                                    <span v-else>
                                        <span v-if="studyPlan.plan.selectCourseOverByCount">
                                            <span v-if="studyPlan.overSelectCourseTotal>=studyPlan.plan.selectCourseOverCount">
                                                <span class="ps-2 text-success">（已完成）</span>
                                            </span>
                                        </span>
                                        <span v-else>
                                            <span v-if="(studyPlan.plan.selectCourseOverByDuration/60)>=studyPlan.plan.selectCourseOverMinute">
                                                <span class="ps-2 text-success">（已完成）</span>
                                            </span>
                                        </span>
                                    </span>
                                </span>
                            </a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a class="nav-link" id="pills-author-tab" data-bs-toggle="pill" href="#pills-author" role="tab" aria-controls="pills-author" aria-selected="false" tabindex="-1">计划简介</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    <section class="py-6">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="tab-content" id="pills-tabContent">
                        <div class="tab-pane fade show active pb-8" id="pills-course" role="tabpanel" aria-labelledby="pills-course-tab">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="mb-5">
                                        <h2 class="mb-1">必修课</h2>
                                        <p>请完成所有必修课学习</p>
                                    </div>
                                </div>
                            </div>
                            <div class="row g-4">
                                <div class="col-xl-3 col-lg-3 col-md-3 col-3" v-for="course in studyPlan.courseList">
                                    <div class="card card-lift card-hover border bg-white p-2" v-on:click="btnViewCourseClick(course)" style="cursor:pointer;">
                                        <div class="position-relative">
                                            <img :src="course.coverImg" class="img-fluid card-img">
                                            <span class="px-2 rounded-3 bg-dark text-white position-absolute bottom-0 end-0 m-2 fs-6">{{ utils.formatDuration(course.duration) }}</span>
                                            <el-tag size="mini" type="success" effect="dark" class="position-absolute top-0 end-0 m-2" v-if="course.state==='Yiwancheng'">{{ course.stateStr }}</el-tag>
                                            <el-tag size="mini" type="warning" effect="dark" class="position-absolute top-0 end-0 m-2" v-else>{{ course.stateStr }}</el-tag>
                                            <span class="position-absolute bottom-0 start-0 m-2">
                                                <el-tag size="mini" type="primary" effect="dark" class="me-1">{{ course.courseType}}</el-tag>
                                                <el-tag size="mini" type="primary" effect="plain" v-if="course.offLine">面授课</el-tag>
                                            </span>
                                        </div>
                                        <div class="card-body">
                                            <h4 class="mb-3">
                                                <a href="javascript:;" class="text-inherit">{{ course.name }}</a>
                                            </h4>
                                            <div class="mb-3 lh-1">
                                                <span>
                                                    <i class="bi bi-star-fill text-warning me-2"></i>
                                                    <span class="text-inherit fw-semibold">{{ course.evaluationAvg }}</span>
                                                </span>
                                                <span class="mx-1">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                         fill="var(--gk-gray-400)" class="bi bi-dot" viewBox="0 0 16 16">
                                                        <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"></path>
                                                    </svg>
                                                </span>
                                                <span>
                                                    <i class="bi bi-person-video3 me-2"></i>
                                                    <span class="text-inherit fw-semibold">{{ course.totaEvaluationlUser }}</span>
                                                </span>
                                            </div>
                                            <div class="lh-1">
                                                <i class="bi bi-credit-card-2-front-fill me-2"></i><span class="text-inherit fw-semibold">{{ course.studyHour }}</span> 课时
                                                <span class="mx-1">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                         fill="var(--gk-gray-400)" class="bi bi-dot" viewBox="0 0 16 16">
                                                        <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"></path>
                                                    </svg>
                                                </span>
                                                <span class="text-inherit fw-semibold text-success" v-if="course.state==='Yiwancheng'">{{ course.credit }}学分</span>
                                                <span class="text-inherit fw-semibold" v-else>{{ course.credit }}学分</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade  pb-8" id="pills-about" role="tabpanel" aria-labelledby="pills-about-tab">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="mb-5">
                                        <h2 class="mb-1">选修课</h2>
                                        <p>
                                            <span :class="studyPlan.overSelectCourseTotal>=studyPlan.plan.selectCourseOverCount ? 'text-success' : ' text-danger'" class="me-2" v-if="studyPlan.plan.selectCourseOverByCount">完成条件：任意完成 {{ studyPlan.overSelectCourseTotal }}/{{ studyPlan.plan.selectCourseOverCount }} 门课程</span>
                                            <span :class="(studyPlan.plan.selectCourseOverByDuration/60)>=studyPlan.plan.selectCourseOverMinute ? 'text-success' : ' text-danger'" class="text-warning" v-if="studyPlan.plan.selectCourseOverByDuration">累计学时要求: {{ utils.formatDuration(studyPlan.overSelectCourseDurationTotal) }}/{{ studyPlan.plan.selectCourseOverMinute }}分钟</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="row g-4">
                                <div class="col-xl-3 col-lg-3 col-md-3 col-3" v-for="course in studyPlan.courseSelectList">
                                    <div class="card card-lift card-hover border bg-white p-2" v-on:click="btnViewCourseClick(course)" style="cursor:pointer;">
                                        <div class="position-relative">
                                            <img :src="course.coverImg" class="img-fluid card-img">
                                            <span class="px-2 rounded-3 bg-dark text-white position-absolute bottom-0 end-0 m-2 fs-6">{{ utils.formatDuration(course.duration) }}</span>
                                            <el-tag size="mini" type="success" effect="dark" class="position-absolute top-0 end-0 m-2" v-if="course.state==='Yiwancheng'">{{ course.stateStr }}</el-tag>
                                            <el-tag size="mini" type="warning" effect="dark" class="position-absolute top-0 end-0 m-2" v-else>{{ course.stateStr }}</el-tag>
                                            <span class="position-absolute bottom-0 start-0 m-2">
                                                <el-tag size="mini" type="primary" effect="dark" class="me-1">{{ course.courseType}}</el-tag>
                                                <el-tag size="mini" type="primary" effect="plain" v-if="course.offLine">面授课</el-tag>
                                            </span>
                                        </div>
                                        <div class="card-body">
                                            <h4 class="mb-3">
                                                <a href="javascript:;" class="text-inherit">{{ course.name }}</a>
                                            </h4>
                                            <div class="mb-3 lh-1">
                                                <span>
                                                    <i class="bi bi-star-fill text-warning me-2"></i>
                                                    <span class="text-inherit fw-semibold">{{ course.evaluationAvg }}</span>
                                                </span>
                                                <span class="mx-1">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                         fill="var(--gk-gray-400)" class="bi bi-dot" viewBox="0 0 16 16">
                                                        <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"></path>
                                                    </svg>
                                                </span>
                                                <span>
                                                    <i class="bi bi-person-video3 me-2"></i>
                                                    <span class="text-inherit fw-semibold">{{ course.totaEvaluationlUser }}</span>
                                                </span>
                                            </div>
                                            <div class="lh-1">
                                                <i class="bi bi-credit-card-2-front-fill me-2"></i><span class="text-inherit fw-semibold">{{ course.studyHour }}</span> 课时
                                                <span class="mx-1">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                         fill="var(--gk-gray-400)" class="bi bi-dot" viewBox="0 0 16 16">
                                                        <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"></path>
                                                    </svg>
                                                </span>
                                                <span class="text-inherit fw-semibold text-success" v-if="course.state==='Yiwancheng'">{{ course.credit }}学分</span>
                                                <span class="text-inherit fw-semibold" v-else>{{ course.credit }}学分</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="pills-author" role="tabpanel" aria-labelledby="pills-author-tab">
                            <div class="row">
                                <div class="col-lg-12 col-md-12 col-12">
                                    <div class="card">
                                        <div class="card-body">
                                            <p v-html="studyPlan.plan.description"></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>

@section Scripts{
    <script src="/sitefiles/assets/lib/geeks/js/bootstrap.bundle.min.js" type="text/javascript"></script>
    <script src="/sitefiles/assets/js/home/study/studyPlanInfo.js" type="text/javascript"></script>
}